<template>
  <div class="tourist">
    <div class="header">
      <div class="touradd">
        <el-button type="primary" size="small" @click="touradd"
          >添加讲解员</el-button
        >
      </div>
      <div class="tournum">
        <span style="color:blue">总人数： {{ tourlist.length }}人</span>
        <span style="color:red">当前带团数: {{ peopleT.length }}人</span>
      </div>
    </div>
    <div class="menu">
      <div class="left">
        <div class="leftup">
          <h4>讲解员详情列表</h4>
          <el-button type="primary" size="small" @click="noticeBtn()"
            >批量推送消息</el-button
          >
        </div>
        <div class="leftmiddle">
          <span>讲解员工号或姓名</span>
          <div class="seachIpt">
            <el-input placeholder="请输入内容" v-model="code">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="seachBtn(code)"
              ></el-button>
            </el-input>
          </div>
          <div class="changetour">
            <el-select
              v-model="select"
              slot="prepend"
              placeholder="全部导游"
              @change="tuan"
            >
              <el-option label="全部导游" value="0"></el-option>
              <el-option label="带团中" value="1"></el-option>
              <el-option label="未带团" value="2"></el-option>
            </el-select>
          </div>
        </div>
        <div class="leftlist">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="tourlist"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" :selectable="check">
            </el-table-column>
            <el-table-column
              prop="user.userCareId"
              label="工牌号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="user.userName"
              label="讲解员姓名"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="user.usermessageStatus"
              label="讲解员详情"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="tourinfo(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="推送消息" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.isSend" style="color: red"
                  ><el-button size="mini" @click="messdata(scope.row)"
                    >推送消息</el-button
                  ></span
                >
                <span v-else>未带团</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[5, 10, 15, 10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="rightwhite" v-if="newwhite">
        <div @click="listdata">查看公告列表</div>
      </div>
      <div class="rightmenu" v-if="newisshow">
        <div class="right" v-for="(item, index) in newinfo" :key="index">
          <div class="title">{{ item.messDistribute }}推送消息</div>
          <div class="menu">{{ item.messElements }}</div>
          <div class="time">{{ item.messPublishtime }}</div>
        </div>
      </div>
    </div>
    <!-- 个人推送发布模态框 -->
    <div class="newsend" v-if="newsend">
      <Newssend />
    </div>
  </div>
</template>

<script>
import router from "@/router";
import news from "./News.vue";
import { tourlistmenu, tourquery, newInfo } from "@/network/api/news/news";
import mitt from "@/utils/mitt";
import Newssend from "@/components/news/NewsSend.vue";
import News from "@/components/news/News.vue";
export default {
  name: "Tourist",
  components: {
    Newssend,
    News,
  },
  data() {
    return {
      newwhite: true,
      newisshow: false,
      newinfo: {},
      newsend: false,
      total: 10,
      code: "",
      currentPage4: 4,
      seach: "",
      select: "",
      tourlist: [],
      pushlist: [],
      list: [],
      peopleT: [],
      pagelist: {
        pageSize: 5,
        pageNum: 1,
      },
      total: 100,
    };
  },
  created() {
    // this.tourlist = getStorage("userlist");
    this.tourlistMenu();
    this.websoc();
    // console.log(window);
    // this.messdata();
    // this.newdata();
  },
  methods: {
    // 带团
    async tuan(val) {
      let info = await tourlistmenu(this.pagelist);
      console.log(info);
      console.log(val);
      this.tourlist = info.data.data.val.allowSending;
      if (val == 2) {
        this.tourlist = this.tourlist.filter((res) => {
          return !res.isSend;
        });
      } else if (val == 1) {
        console.log(this.tourlist);
        this.tourlist = this.tourlist.filter((res) => {
          return res.isSend;
        });
      }else if(val == 0){
        this.$router.push(0)
      }
      console.log(this.tourlist);
    },
    // 个人发送消息查看
    async messdata(data) {
      // console.log(data);
      // console.log(data.user.userName);
      let mesinfo = await newInfo(data.user.userName);
      this.newinfo = mesinfo.data.data.messages;
      this.newinfo.forEach((item) => {
        item.messPublishtime = item.messPublishtime.slice(0, 10);
      });
      console.log(this.newinfo);
      if (this.newinfo.length > 10) {
        this.newinfo.length = 10;
      }
      if (this.newinfo.length) {
        this.newisshow = true;
        this.newwhite = false;
      } else {
        this.newisshow = false;
        this.newwhite = true;
      }
    },
    // 跳转公告
    listdata() {
      router.push({ path: "newslist" });
    },
    // 搜索
    async seachBtn(data) {
      let info = {};
      info.term = data;
      info.pageNum = this.pagelist.pageNum;
      info.pageSize = this.pagelist.pageSize;
      let seachUserInfo = await tourquery(info);
      console.log(seachUserInfo);
      this.tourlist = seachUserInfo.data.data.val.allowSending;
      this.total = seachUserInfo.data.data.val.total;
      // this.pagelist.pageSize = this.tourlist.user.length;

      // console.log(this.pagelist.pageSize, "666666666666666666");

      // this.$refs.pagelist.total = seachUserInfo.data.data.userDaoyouVOS.length;
      // this.$router.go(0);
      // console.log(this.$refs.pagelist);
    },
    // web
    websoc() {
      let websocket = new WebSocket("ws://139.9.88.250:15674/ws");
      console.log(websocket);
      websocket.onopen = this.onopen;
      websocket.onmessage = this.onmessage;
      websocket.onerror = this.onerror;
      websocket.onclose = this.onclose;
    },
    onopen() {
      console.log("成功建立连接");
    },
    onmessage(val) {
      console.log(val, "val");
    },
    onerror() {
      console.log(websocket.readyState, "onerror");
    },
    onclose() {
      console.log(websocket.readyState, "onclose");
    },
    // 单选
    check(row, index) {
      if (row.isSend) {
        return true;
      } else {
        return false;
      }
    },
    // 导游列表
    async tourlistMenu() {
      let info = await tourlistmenu(this.pagelist);
      console.log(info.data.data.val);
      this.total = info.data.data.val.total;
      this.tourlist = info.data.data.val.allowSending;
      console.log(this.tourlist);
      this.tourlist.forEach((item) => {
        if (item.isSend) {
          this.peopleT.push(item.isSend);
        }
      });
      // console.log(this.tourmenu);
    },
    // 批量推送
    noticeBtn() {
      router.push({ path: "newssend", query: { list: this.pushlist } });
    },
    // 新增导游
    touradd() {
      router.push({ path: "tourisadd", query: { show: true } });
    },
    // 导游详情
    tourinfo(data) {
      // console.log(data, 11111111111);
      this.handleSelectionChange(data);
      console.log(this.peoplemy, 33333);
      router.push({
        path: "tourisadd",
        query: { tourmenudata: data, show: false },
      });
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.pushlist = val;
    },
    // 分页
    async handleSizeChange(val) {
      this.pagelist.pageSize = val;
      console.log(this.pagelist);
      let info = await tourlistmenu(this.pagelist);
      this.tourlist = info.data.data.val.allowSending;
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      this.pagelist.pageNum = val;
      console.log(this.pagelist);
      let info = await tourlistmenu(this.pagelist);
      this.tourlist = info.data.data.val.allowSending;
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped lang='scss'>
.tourist {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ccc;
  .header {
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    .tournum {
      margin: 0 auto;
      span {
        margin-left: 50px;
      }
    }
  }
  .menu {
    width: 100%;
    display: flex;
    .left {
      width: 70%;
      padding: 10px 5px;
      box-sizing: border-box;
      .leftup {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .leftmiddle {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .seachIpt {
          width: 40%;
        }
      }
      .leftlist {
        margin-top: 30px;
      }
    }
    .rightwhite {
      width: 30%;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: red;
      div {
        cursor: pointer;
      }
    }
    .rightmenu {
      width: 30%;
      padding: 10px;
      box-sizing: border-box;
      .right {
        width: 100%;
        margin: 20px 0;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid;
        background-color: white;
        .title {
          color: red;
          font-size: 16px;
        }
        .menu {
          font-size: 14px;
          margin: 10px 0;
        }
        .time {
          font-size: 14px;
          text-align: right;
        }
      }
    }
  }
}
</style>